<template>
    <div class="add">
        <navgistor :title="'收货地址'">
        </navgistor>
        <div class="detail">
            <div class="title">
                <input type="text" placeholder="姓名" v-model="obj.name">
                <span>
                    一
                </span>
                <input type="text" placeholder="手机号" v-model="obj.phone">
            </div>
            <div class="select">
                <!-- 级联选择 -->
                <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
                <van-popup v-model="show" round position="bottom">
                    <van-cascader 
                        v-model="cascaderValue" 
                        title="请选择所在地区" 
                        :options="options" 
                        :field-names="{ 
                            text: 'name',
                            value: 'adcode',
                            children: 'districts'
                        }"
                        @close="show = false"
                        @finish="onFinish" />
                </van-popup>
            </div>
            <div class="desc">
                <div class="desc_title">
                    详细地址
                </div>
                <div class="desc_content">
                    <textarea placeholder="请输入详细地址" v-model="obj.a_desc"></textarea>
                </div>
            </div>
            <div class="seleft">
                <input type="checkbox" id="label" v-model="obj.is_select">
                <label for="label">是否设为默认地址</label>
            </div>
        </div>
        <button @click="submit()">
            提交
        </button>
    </div>
</template>

<script>
import navgistor from '@/components/nav-head.vue';
// 引入vant组件
import {
    Popup,
    Field,
    Cascader
} from 'vant'
// 引入 城市列表的数据
import {
    addAddress
} from '@/api'
import {citys} from '@/utils/citys'
export default {
    methods: {
        submit(){
            // 判断数据
            if(
                this.obj.name.length < 1 ||
                !/^(?:(?:\+|00)86)?1\d{10}$/.test(this.obj.phone) ||
                this.fieldValue.length < 1 ||
                this.obj.a_desc.length < 1
            ){
                this.$Message.error('必填值不能为空');
                return
            }
            // 先确保前端处理的数据没问题
            this.obj.is_select = Number(this.obj.is_select);
            this.obj.a_provice = this.fieldValue.split('/')[0];
            this.obj.a_city = this.fieldValue.split('/')[1];
            this.obj.a_code = this.fieldValue.split('/')[2];
            // console.log(this.obj)
            // 提交数据
            addAddress(this.obj).then(res => {
                // console.log(res.data)
                if(res.data.code == 1){
                    this.$Message.success('添加成功');
                    setTimeout(() => {
                        this.$router.back()
                    },800)
                }
            })
        },
        // 全部选项选择完毕后，会触发 finish 事件
        onFinish({ selectedOptions }) {
            this.show = false;
            this.fieldValue = selectedOptions.map((option) => option.name).join('/');
        }
    },
    data() {
        return {
            show: false,
            fieldValue: '',
            cascaderValue: '',
            // 选项列表，children 代表子选项，支持多级嵌套
            options: citys.districts[0].districts,

            // 需要提交给后端的数据
            obj: {
                name: '',
                phone: '',
                a_city: '',
                a_code: '',
                a_provice: '',
                a_desc: '',
                is_select:0
            }
        };
    },
    components: {
        navgistor,
        vanPopup:Popup,
        vanField:Field,
        vanCascader:Cascader
    }
}
</script>

<style lang="scss" scoped>
.add {
    height: 100vh;
    padding-top: 44px;
    background-color: #f5f5f5;
}

.detail {
    width: 92%;
    height: 230px;
    background-color: #ffffff;
    margin-top: 15px;
    margin-left: 4%;
    border-radius: 7px;
    padding: 2%;

    .title {
        height: 35px;
        display: flex;
        align-items: center;
        padding-left: 5%;

        input {
            border-bottom: 1px solid #eee;
            height: 35px;

            &:nth-child(1) {
                width: 20%;
            }

            &:nth-child(3) {
                width: 50%;
                margin-left: 5%;
            }
        }
    }

    .desc {
        padding-left: 5%;
        display: flex;
        margin-top: 8px;

        .desc_title {
            width: 25%;
        }

        .desc_content {
            width: 75%;

            textarea {
                padding: 3%;
                border-radius: 5px;
                height: 100px;
                width: 90%;
                border: 0;
                background-color: #f6f2f2;
            }

            ::-webkit-input-placeholder {
                color: #999;
                font-size: 12px;
            }
        }
    }

    .seleft {
        height: 35px;
        display: flex;
        align-items: center;
    }
}

textarea {
    border: 0;
    outline: none;
}

::-webkit-input-placeholder {
    color: #999;
}

button {
    width: 74%;
    height: 34px;
    border-radius: 17px;
    border: 0;
    outline: none;
    text-align: center;
    color: #ffffff;
    background-color: rgb(50, 134, 255);
    position: fixed;
    bottom: 10px;
    left: 13%;
    font-size: 13px;

    &:active {
        background-color: rgb(52, 118, 211);
    }
}
</style>